<template>
    <div>
        <div style="text-align: center; margin: 0 0 15px 0">
            <el-row>
                <el-button type="primary" @click="getTrackShow()">显示运动轨迹</el-button>
                <el-button type="primary" @click="start()">开始</el-button>
                <el-button type="primary" @click="stop()">结束</el-button>
                <el-select v-model="value" @change="selectModel($event)" placeholder="请选择" style="margin: 0px 20px">
                    <el-option v-for="item in options" :key="item.carId" :value="item.carNO"> </el-option>
                </el-select>
                <el-date-picker
                    v-model="date"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    @change="changeDate"
                    :clearable="false"
                >
                </el-date-picker>
            </el-row>
        </div>
        <div id="container" style="width: 1900px; height: 90vh"></div>
        <!-- <ul class="drawing-panel" style="z-index: 99">
            <li class="btn" @click="start()">开始</li>
            <li class="btn" @click="pauseAni()">暂停</li>
            <li class="btn" @click="continueAni()">继续</li>
        </ul> -->
    </div>
</template>
 
<script>
import icon from '../../assets/img/car.png';
import picon from '../../assets/img/pppp.png';
import pm10 from '../../assets/img/car1.png';
import echarts from 'echarts';
import Pagination from '@/components/Pagination';
import $ from 'jquery';
import waves from '@/directive/waves';
import ajax from '@/utils/myajax';
export default {
    data() {
        return {
            date: '',
            end_time: '',
            startTime: '',
            // 地图相关
            bmap: '',
            trackAni: '',
            trackAniTwo: '',
            point: [],
            points: [],
            lushu: '',
            pl: '',
            start_time: '',
            end_time: '',
            // 车辆运动轨迹
            dwTrack: '',
            // 轨迹线
            polyline: '',
            options: [],
            value: '',
            // 车辆ID
            carId: ''
        };
    },
    created() {
        // 获取存储token
        ajax('Dw/HttpRequestToken', {}, function (data) {
            localStorage.setItem('dwToken', data);
        });
    },
    mounted() {
        this.test();
    },
    methods: {
        selectModel(carId) {
            let obj = this.options.find((item) => {
                return item.carNO === carId; //筛选出匹配数据
            });
            console.log(obj);
            this.carId = obj.carId;
        },
        test() {
            this.bmap = new BMap.Map('container');
            this.bmap.centerAndZoom(new BMap.Point(114.880104, 34.767899), 16);
            this.bmap.addControl(
                new BMap.MapTypeControl({
                    mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
                })
            );
            this.bmap.enableScrollWheelZoom(true);
            this.points = [];
            this.getCar();
        },
        changeDate(e) {
            console.log(e);
            console.log('date', this.date);
        },
        start() {
            if (this.lushu == '') {
                this.$message({
                    message: '请先显示轨迹在操作'
                });
                return;
            }
            this.lushu.start();
        },
        stop() {
            if (this.lushu == '') {
                this.$message({
                    message: '请先显示轨迹在操作'
                });
                return;
            }
            this.lushu.stop();
        },
        dwkpi() {
            // setInterval(this.getCar(), 15000);
        },
        // 时间戳转换
        timestampToTime(timestamp) {
            var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            let Y = date.getFullYear() + '-';
            let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            let D = date.getDate() + ' ';
            let h = date.getHours() + ':';
            let m = date.getMinutes() + ':';
            let s = date.getSeconds();
            return Y + M + D + h + m + +s;
        },

        // 获取车辆运动轨迹并在地图上显示
        getTrackShow() {
            // 先判断时间
            if (this.date == '') {
                this.$message({
                    message: '请选择时间'
                });
                return;
            }

            if (this.value == '') {
                this.$message({
                    message: '请选择车辆'
                });
                return;
            }

            let isStop = {};
            let pIcon = new BMap.Icon(picon, new BMap.Size(41, 52));
            let pm10A = new BMap.Icon(pm10, new BMap.Size(41, 52));
            ajax(
                'Dw/HttpRequestTrack',
                {
                    carId: this.carId,
                    token: localStorage.getItem('dwToken'),
                    startTime: this.date[0],
                    endTime: this.date[1]
                },
                (data) => {
                    // 删除操作
                    this.bmap.removeOverlay(this.polyline);
                    console.log('移除轨迹');
                    if (this.dwTrack != '') {
                        for (var i = 0; i < this.dwTrack.length; i++) {
                            this.bmap.removeOverlay(stop['stop_' + i]);

                            this.points.push(new BMap.Point(this.dwTrack[i].lonc, this.dwTrack[i].latc));
                        }
                    }

                    console.log('车辆运动轨迹', data.data);
                    this.dwTrack = data.data;
                    this.points = [];
                    for (var i = 0; i < this.dwTrack.length; i++) {
                        if (this.dwTrack[i].isStop == false) {
                            console.log('为false');
                        } else {
                            //为 true 添加 stop 图标
                            isStop['stop_' + i] = new BMap.Point(this.dwTrack[i].lonc, this.dwTrack[i].latc);
                            stop['stop_' + i] = new BMap.Marker(isStop['stop_' + i], {
                                icon: pIcon
                            });
                            this.bmap.addOverlay(stop['stop_' + i]);
                        }
                        this.points.push(new BMap.Point(this.dwTrack[i].lonc, this.dwTrack[i].latc));
                    }

                    //用站点画出路线，参数：站点、线路颜色、线路宽度、透明度
                    this.polyline = new BMap.Polyline(this.points, {
                        strokeColor: '#5298ff',
                        strokeWeight: 6,
                        strokeOpacity: 0.8
                    });
                    //添加轨迹到地图
                    this.bmap.addOverlay(this.polyline);

                    // 添加路书事件
                    this.lushu = new BMapLib.LuShu(this.bmap, this.points, {
                        // defaultContent: '动车继续前行，况且况且...',
                        speed: 100, //速度，单位米每秒
                        icon: pm10A,
                        autoView: true,
                        enableRotation: true,
                        width: 200
                    });
                }
            );
        },

        // 获取小车在地图上标记
        getCar() {
            let car = {},
                marker = {},
                infoWindow = {},
                tett = {},
                address = {},
                isStop = {},
                stop = {};
            let myIcon = new BMap.Icon(icon, new BMap.Size(52, 52));
            let pIcon = new BMap.Icon(picon, new BMap.Size(41, 52));
            let pm10A = new BMap.Icon(pm10, new BMap.Size(41, 52));

            ajax('Dw/HttpRequestCars', { token: localStorage.getItem('dwToken') }, (data) => {
                let carList = data.data[0];
                console.log('carList,车辆信息', carList);
                this.options = carList.cars;
                // 拿到小车数据在地图上标记
                for (let key in carList.cars) {
                    if (carList.cars[key].carStatus != undefined) {
                        // 判断车存在
                        car['car_' + key] = new BMap.Point(carList.cars[key].carStatus.lonc, carList.cars[key].carStatus.latc);
                        // 获取车量地址
                        ajax(
                            'Dw/HttpRequestAddress',
                            {
                                token: localStorage.getItem('dwToken'),
                                lon: carList.cars[key].carStatus.lonc,
                                lat: carList.cars[key].carStatus.latc
                            },
                            (data) => {
                                address['address_' + key] = data.data;
                            }
                        );
                        setTimeout(() => {
                            marker['marker_' + key] = new BMap.Marker(car['car_' + key], {
                                icon: myIcon
                            });
                            this.bmap.addOverlay(marker['marker_' + key]);
                            marker['marker_' + key].setRotation(carList.cars[key].carStatus.dir);

                            tett['tett_' + key] = '<br/>车速：' + carList.cars[key].carStatus.speed + 'km/h';
                            let heartTime = this.timestampToTime(carList.cars[key].carStatus.heartTime);
                            let pointTime = this.timestampToTime(carList.cars[key].carStatus.pointTime);
                            let infoWin =
                                `<div style="padding:0px 20px 15px 20px">` +
                                `<span style="line-height:50px">` +
                                carList.cars[key].carNO +
                                `</span>` +
                                `<br/>
                                <img src="https://jjjt.oss-cn-shanghai.aliyuncs.com/Dw/1.png" alt="" class="imgIcon">` +
                                `<span style="margin-right:40px;line-height:40px">` +
                                heartTime +
                                `</span>` +
                                `<img src="https://jjjt.oss-cn-shanghai.aliyuncs.com/Dw/2.png" alt="" class="imgIcon" >有线` +
                                `<br/>` +
                                `<img src="https://jjjt.oss-cn-shanghai.aliyuncs.com/Dw/3.png" alt="" class="imgIcon">` +
                                `<span style="margin-right:40px;line-height:40px">` +
                                pointTime +
                                `</span>` +
                                `<img src="https://jjjt.oss-cn-shanghai.aliyuncs.com/Dw/4.png" alt="" class="imgIcon">速度` +
                                carList.cars[key].carStatus.speed +
                                `KM/H` +
                                `<br/>` +
                                `<img src="https://jjjt.oss-cn-shanghai.aliyuncs.com/Dw/5.png" alt="" class="imgIcon">` +
                                `<span style="margin-right:40px;line-height:40px">ACC:关` +
                                `</span>` +
                                `<br/><br/>` +
                                `<img src="https://jjjt.oss-cn-shanghai.aliyuncs.com/Dw/6.png" alt="" class="imgIcon">` +
                                address['address_' + key] +
                                // `<button class="btn" @click="start()">开始</button>` +
                                '</div>';
                            infoWindow['info_' + key] = new BMap.InfoWindow(infoWin);
                            marker['marker_' + key].addEventListener('click', () => {
                                console.log('点击了' + carList.cars[key].carId);
                                this.carId = carList.cars[key].carId;
                                this.value = carList.cars[key].carNO;
                                let item = Object.keys(stop);
                                console.log(item);
                                for (const key in item) {
                                    console.log(item[key]);
                                    this.bmap.removeOverlay(stop[item[key]]);
                                }
                                this.bmap.openInfoWindow(infoWindow['info_' + key], car['car_' + key]);
                            });
                        }, 1000);
                    } else {
                        console.log('no carStatus');
                    }
                }
            });
        }
    }
};
</script>
<style scoped>
.imgIcon {
    width: 16px;
    height: 16px;
    margin-right: 10px;
}
li {
    list-style: none;
}
.drawing-panel {
    z-index: 999;
    position: fixed;
    bottom: 3.5rem;
    margin-left: 3rem;
    padding: 1rem 1rem;
    border-radius: 0.25rem;
    background-color: #fff;
    box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
.btn {
    width: 90px;
    height: 30px;
    float: left;
    background-color: #fff;
    color: rgba(27, 142, 236, 1);
    font-size: 14px;
    border: 1px solid rgba(27, 142, 236, 1);
    border-radius: 5px;
    margin: 0 5px;
    text-align: center;
    line-height: 30px;
}
.btn:hover {
    background-color: rgba(27, 142, 236, 0.8);
    color: #fff;
}
</style>
<style>
.el-input--small {
    width: 145px;
}
</style>